<template>
  <div class="goodsTiktokSales">
    <!-- <choice_goodsTiktokCales
      class="choice01"
      @formatwdate="formatwdate"
      :timeData="timeData"
      show="month"
      v-if="timeData"
    > -->
    <choice2 @formatwdate="formatwdate" @formatwdate1="formatwdate1" show="month" :timing="8">
      <template>
        <!-- 商品种类 -->
        <!-- 商品来源 全部= -1 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5-->
        <radio_group
          v-if="sourceList.length != 0"
          :radio_values="sourceList"
          v-model="goodsKind"
          title="商品来源"
          :tit="a ? tit1 : goodsKind"
        />
        <!-- 全部 -->
        <radio_group :radio_values="goodslist" v-model="source" :title="title1" :tit="source" />
      </template>
    </choice2>
    <div class="list_public">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01" :class="timeData?'':''">拼命加载中...</van-loading>
      <van-list
        v-if="table_data01.length"
        v-model="loading"
        :finished="finished"
        :finished-text="permissions || (!loading_01 && isQzss) ? '' : '我是有底线的～'"
        @load="onLoad"
        :immediate-check="false"
      >
        <div class="lp_box"
          v-for="(item, i) in table_data01"
          :key="'table' + i"
          @click="todatails(item.pro_id)"
        >
          <i class="rank_num" v-if="i <= 8">{{i+1}}</i>
          <i class="ordinary_num" v-else>{{i+1}}</i>
          <div class="lp_header">
            <div class="lp_cover_box">
              <div class="lp_cover">
                <img v-lazy="item.logo" v-errorImg:goods />
              </div>
            </div>
            <div class="lp_title">
              <div class="lp_title_item">
                <SourceIcons :sourceid="item.source_id" class="prpr1" />
                <span>{{ item.title }}</span>
              </div>
              <div class="lp_price_box">
                <span>￥</span><strong>{{ item.price }}</strong>
              </div>
            </div>
          </div>
          <div class="lp_footer">
            <div class="lpf_item">
              <strong>{{ format_num(item.pv_incr) }}</strong>
              <span>{{ RankType==1?'日':RankType==2?'周':'月' }}访客量</span>
            </div>
            <div class="lpf_item">
              <strong>{{ format_num(item.sale_incr) }}</strong>
              <span>{{ RankType==1?'日':RankType==2?'周':'月' }}销量</span>
            </div>
            <div class="lpf_item">
              <strong>{{ formatRate(item.commission_rate, 1, 2) }}</strong>
              <span>佣金率</span>
            </div>
          </div>
        </div>
        <p v-if="!loading_01 && isQzss && !permissions" class="nothingWl">
          榜单中没有您想要的结果?
          <span @click="toSearch">全站搜索</span>
        </p>
        <noPower v-if="permissions" :icon="false" :isRank="true" />
      </van-list>
      <div class="bottom_Collection" v-if="!table_data01.length && !loading_01">
        <img src="@/assets/three/noData.png" alt />
        <p class="nothingWl" v-if="isFilter">暂无数据</p>
        <!-- <p class="nothingWl" v-if="!isQzss">我是有底线的~</p> -->
        <p v-if="isQzss && !isFilter">
          榜单中没有您想要的结果?
          <span @click="toSearch">全站搜索</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import radio_group from '@/component/screen1';
import choice2 from '@/component/choice_2';
import choice_goodsTiktokCales from '@/component/choice_goodsTiktokCales';
import SourceIcons from '@/component/SourceIcons'; //图片
import errorImg from '@/assets/img/shop.png'; //图片

export default {
  name: '',
  components: {
    radio_group,
    choice_goodsTiktokCales,
    SourceIcons,
    choice2
  },
  props: ['valueSerach'],
  data() {
    return {
      a: true,
      valSerach: '',
      loading_01: true,
      permissions: false, //权限
      tit1: '筛选',
      tit2: '全部',
      title1: '商品类目',
      source: '全部',
      goodsKind: '全部',
      goodslist: [], //全部商品
      goodslist1: [],
      CategoryId: 0, // "商品id"
      CategoryId_01: 0, // "商品id"
      RankType: 1, //判断日月周榜单
      Time: '', //时间
      page: 1,
      Age: '不限',
      Gender: '不限',
      //  ss
      sourceList: ['全部', '京东', '淘宝', '小店', '天猫', '苏宁', '考拉'],
      title: '日榜',
      value: '',
      active: '抖音销量榜',
      ProFrom: -1, //商品来源 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      page: 1,
      count: '',
      table_data01: [],
      table_data02: [],
      dataList: [],
      //触底
      loading: false,
      finished: false,
      refreshing: false,
      pageSize: 30,
      isQzss: false,
      errorImg: errorImg,
      isFilter:false,
      timeData:null,
    };
  },
  computed: {
    // 显示头像默认图片
    defaultImg() {
      return 'this.src="' + errorImg + '"';
    }
  },
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.searchKey('');
      }
    }
  },
  destroyed() {},
  created() {
    // this.getTimeData().then(()=>{
      if (window.pageYOffset != 0) {
        window.pageYOffset = 10;
      }
      this.initF();
      // this.PostRankList();
      this.$watch('goodsKind', function (newValue, oldValue) {
        this.initF();
        this.isFilter = (this.goodsKind != '全部') || (this.source != '全部'); //判断是否带筛选条件，用来区分展示暂无数据等状态
        this.a = false;
        if (newValue == '全部') {
          this.table_data01 = [];
          this.ProFrom = -1;
          this.PostRankList();
        } else if (newValue == '京东') {
          this.table_data01 = [];
          this.ProFrom = 0;
          this.PostRankList();
        } else if (newValue == '淘宝') {
          this.table_data01 = [];
          this.ProFrom = 1;
          this.PostRankList();
        } else if (newValue == '小店') {
          this.table_data01 = [];
          this.ProFrom = 2;
          this.PostRankList();
        } else if (newValue == '天猫') {
          this.table_data01 = [];
          this.ProFrom = 3;
          this.PostRankList();
        } else if (newValue == '苏宁') {
          this.table_data01 = [];
          this.ProFrom = 4;
          this.PostRankList();
        } else if (newValue == '考拉') {
          this.table_data01 = [];
          this.ProFrom = 5;
          this.PostRankList();
        }
      });
      this.$watch('source', function (newValue, oldValue) {
        this.initF();
        this.isFilter = (this.goodsKind != '全部') || (this.source != '全部'); //判断是否带筛选条件，用来区分展示暂无数据等状态
        this.table_data01 = [];
        this.dataList = [];
        let CategoryId = this.goodslist1.filter(item => {
          if (item.categoryName == newValue) {
            let id = item.id;
            return id;
          }
        });
        this.CategoryId = CategoryId[0].id;
        this.PostRankList();
      });
    // });
  },
  mounted() {
    this.getProCategories();
  },

  methods: {
    initF(){
      this.loading_01 = true;
      this.finished = false;
      // this.valSerach = '';
      this.permissions = false;
      this.page = 1;
      this.CategoryId = 0;
      // this.RankType = 1;
      this.table_data01 = [];
    },
    // getTimeData(){
    //   let that = this
    //   return new Promise((resolve, reject) => {
    //     this.$axios.get('/api/product/GetRankDates').then((res)=>{
    //       if(!res.data.code){
    //         console.log(res.data.data)
    //         this.timeData = res.data.data;
    //         resolve();
    //       }
    //     });
    //   });
    // },
    searchKey(key) {
      this.valSerach = key;
      this.page = 1;
      (this.permissions = false), (this.finished = false);
      this.table_data01 = [];
      this.PostRankList();
    },
    toSearch() {
      this.$router.push({
        path: '/searchHistory',
        query: { value: 1, name: this.valSerach }
      });
    },
    douyin(i) {
      location.href = i;
    },
    //跳转达人详情
    taldatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id: id } });
    },
    //跳转商品详情
    todatails(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id: id } });
    },
    //子组件传来的周月日榜
    formatwdate(i,dateObj) {
      this.page = 1;
      this.table_data01 = [];
      this.dataList = [];
        console.log(dateObj);
      if (i == '日榜') {
        this.RankType = 1;
        this.Time = dateObj.value;
      } else if (i == '周榜') {
        // this.deltime(time);
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
        this.RankType = 2;
      } else if (i == '月榜') {
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
        this.RankType = 3;
      }
      this.PostRankList();
    },
    formatwdate1(dateObj) {
      this.page = 1;
      this.table_data01 = [];
      this.dataList = [];
      if(this.RankType == 1){ //日榜传一个值，周榜月榜传区间日期
        this.Time = dateObj.value;
      }else{
        this.Time = dateObj.startDate+'-'+dateObj.endDate;
      }
      this.PostRankList();
    },
    //当前日默认时间
    getday() {
      var today = new Date();
      let h = today.getHours();
      let m = today.getMinutes();
      var i;

      this.Time = this.getDay(-1);
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + '-' + tMonth + '-' + tDate;
      // console.log( + tDate);
    },
    // 商品类目接口
    getProCategories() {
      return this.$axios({
        method: 'get',
        url: '/api/product/GetProCategoriesNew'
      })
        .then(res => {
          //   全部中的商品名称
          this.goodslist1 = res.data.data;
          this.goodslist = this.goodslist1.map(item => {
            return item.categoryName;
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取数据抖音销量榜
    PostRankList() {
      this.loading = true;
      this.loading_01 = true;
      this.permissions = false;
      this.finished = false;
      this.isQzss = Boolean(this.valSerach);
      this.$axios
        .post('/api/product/PostDYVolumeRanks', {
          CategoryId: this.CategoryId,
          categoryIds:[],
          RankType: this.RankType,
          ProFrom: this.ProFrom,
          Gender: this.Gender,
          Age: this.Age,
          Time: this.Time,
          Keyword: this.valSerach ? this.valSerach : '',
          Index: this.page,
          SortValue:1,
          Size: this.pageSize,
          type: 1
        })
        .then(res => {
          this.loading = false;
          this.loading_01 = false;
          if (res.data.code == 0) {
            this.table_data01 = this.table_data01.concat(res.data.data.ranks);
            this.refreshing = false;
            this.finished = false;
            if (res.data.data.ranks.length < this.pageSize && res.data.data.ranks.length) {
              this.finished = true;
            }
          } 
          if (res.data.code == 1003 || res.data.code1 == 1013) { //code1:1013个数权限不够 - code1专门给前端用
            this.permissions = true;
            this.finished = true;
          }
        })
        .catch(err => {
          this.loading = false;
          this.loading_01 = false;
          console.log(err);
        });
    },
    //或去年
    year() {
      var today = new Date();
      var tYear = today.getFullYear();
      return tYear;
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + '-' + tMonth + '-' + tDate;
      // console.log( + tDate);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    //当前月默认时间
    //去掉月日
    deltime(time) {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var a = time.replace(/日/g, '-');
      var str = a.replace(/月/g, '-');
      var str1 = str.replace(/--/g, '-' + y + '-');
      var str1 = str1.substring(0, str1.length - 1);
      this.Time = y + '-' + str1;
    },

    month() {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth();
      var d = nowdate.getDate();
      var lastDay = new Date(y, m, 0);
      if (m < 10) {
        m = '0' + m;
      }
      if (d < 10) {
        d = '0' + d;
      }
      var newvalue = y + '-' + m + '-' + '01' + '-' + y + '-' + m + '-' + lastDay.getDate();
      this.Time = newvalue;
    },
    //触底
    onLoad() {
      if (this.page * this.pageSize > this.table_data01.length) {
        this.loading = false;
        this.finished = true;
      } else if (this.table_data01.length > 0) {
        this.loading = true;
        this.page = this.page + 1;
        // alert('+1')
        this.PostRankList();
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/common/list_public.styl';
//@import url();
.goodsTiktokSales {
  .nothingWl {
    font-size: 0.346667rem;
    color: #888;
    padding-bottom: 1.6rem;
    span {
      color: #fd7f2c;
    }
  }
  a {
    text-decoration: none;
  }
  // overflow: hidden;
  #sales {
    padding: 0 0.4rem;
    background: #f1f1f1;
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.58rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: -0.183333rem;
      left: -0.1rem;
      font-size: 0.373333rem;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      font-family: DINPro-Medium;
      color: #666666;
    }
    .box {
      margin: 0 auto;
      border: 1px solid transparent;
      border-radius: 8px;
      background: #fff;
      margin-bottom: 0.2rem;
      padding: 0.266rem 0.266rem 0;
      box-sizing: border-box;
      // 图片+标题
      .boxtop {
        position: relative;
        .img_title {
          display: flex;
          .rank {
            position: absolute;
            top: -0.2rem;
            left: -0.1rem;
            z-index: 1;
            width: 0.62rem;
            height: 0.52rem;
            background: url(../../assets/two/fire.png) no-repeat center;
            background-size: 100% 100% !important;
            box-sizing: 100%;
            p {
              font-family: DINPro-Medium;
              font-size: 0.373333rem;
              color: #666666;
              text-align: center;
              line-height: 0.56rem;
            }
          }
          .img,
          img {
            display: block;
            width: 1.333333rem;
            height: 1.333rem;
            border-radius: 0.266667rem;
            margin-right: 0.266667rem;
            margin-bottom: 0.4rem;
          }
          .title {
            position: relative;
            .prpr1 {
              position: absolute;
              left: 0;
              top: 0.2rem;
            }
            p {
              padding-left: 0.5rem;
              width: 6.4rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }

            font-size: 0.373333rem;
            color: #222;
            padding-top: 0.133333rem;
            .price {
              span {
                font-size: 0.266667rem;
              }
              font-size: 0.373333rem;
              color: #fd7f2c;
              padding-top: 0.2rem;
            }
          }
        }
      }
      // datanum
      .boxbot {
        .num {
          display: flex;
          justify-content: space-around;
          padding-bottom: 0.4rem;
          div {
            text-align: center;
            p {
              font-size: 0.373333rem;
              color: #222;
              font-family: Dinpro-medium;
            }
            span {
              display: block;
              font-size: 0.293333rem;
              color: #888;
            }
          }
        }
      }
    }
    .bot {
      display: flex;
      width: 9.2rem;
      height: 0.88rem;
      line-height: 0.906667rem;
      background-color: #f4f9ff;
      border-radius: 0.44rem;
      border: solid 0.02rem #1779ff;
      margin: 0 auto;
      margin-bottom: 1.506667rem;

      p {
        margin-left: 0.6rem;
        font-size: 0.346667rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
      }
      a {
        font-size: 0.346667rem;
        color: #1779ff;
      }
    }
  }

  .bottom_Collection {
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.346667rem;
      line-height: 0.4rem;
      color: #888888;
    }
    span {
      color: #fd7f2c;
    }
  }

  .choice {
    width: 5.333333rem;
  }
  .mgt10{
    margin-top: .5rem;
  }
  .color {
    color: #888;
  }
}
</style>
